import React from "react";
import WeUI from 'react-weui'
import {Link} from 'react-router-dom'
const {
    Tab,
    TabBody,
    Cells,
    CellHeader,
    CellBody,
    Cell,
    CellFooter,
    Badge
} = WeUI;
import IconUser from './assets/img/user.jpg'

const User = () => {
    // 页面 组件化思维
    return (
        <Tab>
            <TabBody>
                <div>
                    <Cells style={{marginTop:'0px'}}>
                        <Cell>
                            {/* react 行内样式 {驼峰式} */}
                            <CellHeader  style={{position:'relation',marginRight:'10px'}}>
                                <img src={IconUser} style={{width:'50px',display:'block'}} alt=""/>
                            </CellHeader>
                            <CellBody>
                                <p>光头强</p>
                                <p style={{fontSize:'13px',color:'#88888'}}>欢迎来到图书漂流！</p>
                            </CellBody>
                        </Cell>
                        {/* react-weui 文档 props = true */}
                        <Cell access>
                            <CellBody>
                                订单 <Badge preset="body">8</Badge> {/*徽章 */}
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                        <Cell access>
                            <CellBody>
                                发出的申请 <Badge preset="body">8</Badge> {/*徽章 */}
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                        <Cell access>
                            <CellBody>
                                收到的申请 <Badge preset="body">8</Badge> {/*徽章 */}
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                        <Cell access>
                            <CellBody>
                                收藏 
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                        <Cell access>
                            <CellBody>
                                <Link to="/address">地址</Link> 
                            </CellBody>
                            <CellFooter/>
                        </Cell>
                    </Cells>

                </div>
            </TabBody>
        </Tab>
    )
}

export default User;